<!-- home -->
<template>
  <div class="container">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item  style="height: 150px">
        <img src="../images/jfstore.jpg" class="front_img" />
      </van-swipe-item>
    </van-swipe>
    <van-tabs @click="onClickFl" >
      <van-tab v-for="index in platformProductCategory" :title="index.name" :key="index.categoryId" />
    </van-tabs>

    <div class="zs_bg" v-if="productList.length > 0 ">
      <div v-for="item in productList" :key="item.skuId" class="zs_item" @click="toProductInfo(item.companyId,item.productId,item.properties,item.skuName,item.skuId,item.jfnum)">
        <img :src="item.image1" class="gg_img" />
        <div style="background-color: white;font-size: 16px;padding-bottom: 5px;padding-top: 5px;padding-left: 10px;">
          {{item.productName != null ? item.productName:''}}
        </div>

        <div style="display: flex;flex-direction: row;">

          <div style="display: flex;flex-direction: column;">
            <div style="background-color: white;font-size: 14px;padding-bottom: 5px;color: #B2B2B2;padding-left: 10px;">
              {{item.skuName != null ? item.skuName:''}}
            </div>

            <div style="width:100%;background-color: white;font-size: 14px;padding-bottom: 5px;color: red;padding-left: 10px;">
              {{item.jfnum != null ? item.jfnum + ' 积分' :'0'}}
            </div>
          </div>

          <div style="margin-top: 15px;margin-left: 32px;">
            <div style="width: 60px;height: 20px;border: 1px solid #B2B2B2;background-color: red;color: white;border-radius: 10px;text-align: center;">
              立即兑换
            </div>
          </div>
        </div>

      </div>
    </div>
    <div v-else>
      <van-empty image="error" description="没有相关商品" />
    </div>

  </div>
</template>

<script>

  import { queryCompanyInfo, queryProductCategory ,queryProductInfo,queryProductSkuList } from '../../api/api'
  import {Toast} from 'vant'
  export default {
    data() {
      return {
        companyListFront: [],
        companyList1: [],
        platformProductCategory: [],
        platformCategory: '',
        productList:[],
        pageNum:1,
        pageSize: 10,
        agencyId:''
      }
    },

    created() {
      // const agencyIdStore = this.$store.getters.agencyId
      let  agencyId = this.$route.query.agencyid
      if (agencyId && typeof agencyId !== 'undefined') {
        this.$store.dispatch('setAgencyId', agencyId)
      }else{
        agencyId = this.$store.getters.agencyId
      }
      this.agencyId = agencyId
      this.queryPlatformProductCategory()
      this.queryProductInfo()
      let that = this
      window.onscroll = function(){
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
        //变量windowHeight是可视区的高度
        var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //变量scrollHeight是滚动条的总高度
        var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
        //滚动条到底部的条件
        if(scrollTop+windowHeight >= scrollHeight-40){
          //写后台加载数据的函数
          that.pageNum = that.pageNum + 1
          that.queryProductInfo()
        }
      }

    },
    mounted() { },

    methods: {

      queryPlatformProductCategory() {
        let agencyId = this.$store.getters.agencyId
        const param = { companyName:'青岛智简尚达信息科技有限公司' }
        queryProductCategory(param).then(response => {
          this.platformProductCategory = [{ categoryId: '', name: '全部' }, ...response.data]
        })
      },

      onClickFl(name, title) {
        this.platformCategory = this.platformProductCategory[name].categoryId
        this.pageNum = 1
        this.queryProductInfo()
      },

      queryProductInfo() {
        let agencyId = this.$store.getters.agencyId
        const param = {pageSize:this.pageSize,pageNum:this.pageNum,category: this.platformCategory ,agencyId:agencyId ,goodsType:'1', }
        console.log('请求参数',param)
        let that = this
        queryProductSkuList(param).then(response => {
          console.log(response)
          that.productList = that.pageNum == 1 ? response.rows:that.productList.concat(response.rows)
          console.log(that.pageNum)
          console.log('list:',that.productList)
        })
      },

      toProductInfo(companyId, productId,properties,skuName,skuId,jfnum) {

        this.$router.push({ path: '/jfStoreProduct', query: { companyId: companyId, productId: productId ,skuName:skuName,properties:properties,skuId:skuId,jfnum:jfnum}})

      },

    }
  }
</script>
<style lang="scss" scoped>

  .container{
    width: 100%;
    height: auto;
  }

  .container::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

  .my-swipe .van-swipe-item {
    z-index: 1000;
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }

  .my-swipe .van-swipe-item::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

  .my-swipe::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

  .front_img{
    width: 100%;
    height: 150px;
  }
  .title_bg{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding:10px;
    background-color: white;
    margin-top: 5px;
  }
  .title_sx{
    height: 15px;
    width: 3px;
    background-color: #f50;
  }
  .title_name{
    color:#333333;
    font-size: 16px;
    margin-left: 5px;
  }
  .zs_bg{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding-left:10px;
    padding-right:10px;
    background-color: white;
    padding-bottom: 50px;
  }

  .zs_bg::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

  .zs_item{
    width: 48%;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    margin-top: 10px;
    border-radius: 5px;
    box-shadow:-2px 0 3px -1px #fff, 0 -2px 3px -1px #fff, 0 2px 3px -1px #B1B1B1, 2px 0 3px -1px #B1B1B1;
  }
  .gg_img{
    width: 100%;
    height: 130px;
  }

  .gg_img1{
    width: 100%;
    height: 100px;
  }

  .search{
    background-color: #ff5500;
  }

  .more{
    color:#CCCCCC;
    font-size: 14px;
    position: absolute;
    right: 25px;
  }

  .more::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

  .sticky {
    z-index: 100;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }

  .topcss{
    background-color: red;
  }


</style>
